<template>
    <div class="app-container">
        <div class="filter-container">
            <el-form inline>
                <el-form-item label="班级">
                    <el-input v-model="searchQuery.className" placeholder="请选择" clearable @click.native="filterSelectClassVisible = true" />
                </el-form-item>
                <el-form-item label="学员">
                    <el-input v-model="searchQuery.studentName" placeholder="请选择" clearable @click.native="filterSelectStudentVisible = true" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" @click="search()">搜索</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-plus" @click="dialogVisible = true">添加</el-button>
                </el-form-item>
            </el-form>
            <SelectClass :visible.sync="filterSelectClassVisible" @select="(res) => {searchQuery.classId = res.id, searchQuery.className = res.name}" />
            <SelectStudent :visible.sync="filterSelectStudentVisible" @select="(res) => {searchQuery.studentId = res.id, searchQuery.studentName = res.name}" />
        </div>
        <div class="table-container">
            <el-table :data="pageInfo.data" border highlight-current-row header-cell-class-name="table-header">
                <el-table-column prop="id" label="ID" width="60" />
                <el-table-column prop="class_name" label="班级" />
                <el-table-column prop="student_name" label="学员" />
                <el-table-column prop="course_name" label="课程" />
                <el-table-column prop="learned_num" label="销课量" />
                <el-table-column prop="created_at" label="创建时间" />
                <el-table-column label="操作" width="150">
                    <template slot-scope="scope">
                        <el-button type="text" @click="handleDelete(scope.row)">退班</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- <pagination
                :page.sync="pageInfo.current_page"
                :limit.sync="pageInfo.per_page"
                :total="pageInfo.total"
                @pagination="getList"
            /> -->
            <pagination
                :total="pageInfo.total"
                :page.sync="pageInfo.current_page"
                :limit.sync="pageInfo.per_page"
                @pagination="getList"
                />

        </div>
        <div class="dialog-container">
            <el-dialog title="添加学员" :visible.sync="dialogVisible" :close-on-click-modal="false">
                <el-form :model="temp" label-width="100px">
                    <el-form-item label="班级">
                        <el-input v-model="temp.class_name" placeholder="请选择" class="w-200" @click.native="selectClassVisible = true" />
                    </el-form-item>
                    <el-form-item label="课程">
                        <el-select v-model="temp.course_id" placeholder="请选择" class="w-200">
                            <el-option :value="0" label="请选择" />
                            <el-option v-for="course in classCourses" :key="course.id" :label="course.course_name" :value="course.course_id" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="学员">
                        <el-input v-model="temp.student_name" placeholder="请选择" class="w-200" @click.native="selectStudentVisible = true" />
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button type="primary" @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="handleSave">保存</el-button>
                </div>
            </el-dialog>
            <SelectStudent :visible.sync="selectStudentVisible" @select="handleSelectStudent" />
            <SelectClass :visible.sync="selectClassVisible" @select="handleSelectClass" />
        </div>
    </div>
</template>
<script>
import SelectStudent from '../components/SelectStudent.vue'
import SelectClass from '../components/SelectClass.vue'
import classStudentApi from '@/api/class-student'
import classApi from '@/api/class'
import Pagination from '@/components/Pagination'

export default {
    name: 'ClassStudent',
    components: { SelectStudent, SelectClass, Pagination },
    data() {
       return {
            dialogVisible: false,
            selectStudentVisible: false,
            selectClassVisible: false,
            filterSelectStudentVisible: false,
            filterSelectClassVisible: false,
            pageInfo: {
                current_page: 1,
                per_page: 10,
                total: 0,
                data: []
            },
            searchQuery: {
                classId: 0,
                className: '',
                studentId: 0,
                studentName: ''
            },
            classCourses: [],
            emptyTemp: null,
            temp: {
                id: 0,
                student_id: 0,
                student_name: '',
                class_id: 0,
                course_id: 0,
                class_name: ''
            }
       }
    },
    watch: {
        $route: {
            immediate: true,
            handler: function(route) {
                this.searchQuery.classId = route.query.classId ? parseInt(route.query.classId) : 0
                this.getList()
            }
        }
    },
    created() {
        this.getList()
    },
    methods: {
        search(page) {
            this.pageInfo.current_page = page || 1
            this.getList()
        },
        getList() {
            const params = {
                page: this.pageInfo.current_page,
                perPage: this.pageInfo.per_page,
                classId: this.searchQuery.classId,
                className: this.searchQuery.className,
                studentId: this.searchQuery.studentId,
                studentName: this.searchQuery.studentName
            }
            classStudentApi.page(params).then(res => {
                this.pageInfo = res.data
            }).catch(err => {
                console.error(err)
            })
        },
        handleSelectStudent(student) {
            this.temp.student_id = student.id
            this.temp.student_name = student.name
        },
        handleSelectClass(classObj) {
            console.log(classObj) // 打印班级对象以确认其结构和内容是否正确
            if (classObj.id !== this.temp.class_id) { // 检查班级是否已选择
                this.temp.class_id = classObj.id
                this.temp.class_name = classObj.name
                classApi.getCourses(classObj.id).then(res => {
                    this.classCourses = res.data
                })
            }
        },
        handleSave() {
            if (this.temp.student_id === 0 || this.temp.class_id === 0) {
                return this.$message.error('请选择班级和学员')
            }
            classStudentApi.add(this.temp).then(res => {
                if (res.code === 200) {
                    this.$message.success('添加成功')
                    this.dialogVisible = false
                    this.search()
                } else {
                    this.$message.error(res.msg)
                }
            })
        },
        handleDelete(row) {
            this.$confirm('确定要退班吗？', '提示').then(() => {
                classStudentApi.delete(row.id).then(res => {
                    this.$message.success('退班成功')
                    this.search()
                }).catch(err => {
                    this.$message.error(err.message || '退班失败')
                })
            })
        }
    }
}
</script>
